En Dinamic Drive nos muestran una animación de fotogramas con CSS3.
El efecto muestra el deslizamiento de una imagen que permanece oculta y se sitúa sobre la imagen que visualizamos. En IE8 y IE9 también funciona, aunque no queda tan conseguido el efecto deslizante.

Como son efectos que la mayoría de veces los añadimos esporadicamente lo que haremos para probarlo es incluir todo el código necesario justo donde deseamos mostrar el efecto, ya sea una entrada o un gadget de HTML.

Primero añadimos el código para las imágenes, y ahí mismo especificamos el tamaño de la primera imagen.


(No es necesario añadir los dos ejemplos, son como referencia para añadir el tamaño de la que será la primera imagen)

A continuación de las imágenes copiamos y pegamos los estilos:


<style>
.pulloutimage{
position: relative;
}

.pulloutimage img{
position: absolute; /* absolute position and stack images inside container */
left: 0;
/* aquí estilos para el borde de la primera imagen */
}

.pulloutimage img.ondemand{ /*CSS for image shown on demand */
opacity: 0;
visibility: hidden; /* hide it initially (mainly for legacy browsers) */
}

.pulloutimage img.original{
z-index: 1; /* set base z-index of initially shown image */
}

@-webkit-keyframes revealfromright{ /* keyframe animation that slides a DIV out from another before overlapping later */
0%{ /* Start of animation */
z-index: -1;
opacity: 0;
}
50%{ /* Half way point, move image to right edge of container */
opacity: 1;
z-index: -1;
left: 100%;
box-shadow: none;
}
51%{ /* 51% point, stack animating image on top of original image */
z-index: 2;
}
100%{ /* Final point, move animating image back so it's on top of original */
left: 0;
box-shadow: 8px 8px 15px gray;
}
}

@-moz-keyframes revealfromright{
0%{
z-index:-1;
opacity:0;
}
50%{
opacity:1;
z-index:-1;
left:100%;
box-shadow: none;
}
51%{
z-index:2;
}
100%{
left:0;
box-shadow: 8px 8px 15px gray;
}
}

@-ms-keyframes revealfromright{
0%{
z-index:-1;
opacity:0;
}
50%{
opacity:1;
z-index:-1;
left:100%;
box-shadow: none;
}
51%{
z-index:2;
}
100%{
left:0;
box-shadow: 8px 8px 15px gray;
}
}

.pulloutimage:hover img.ondemand{ /* when mouse rolls over pulloutimage container, style to apply to "ondemand" image */
-webkit-animation-name:revealfromright; /* specify animation keyframe */
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;

-moz-animation-name:revealfromright;
-moz-animation-duration: 1s;
-moz-animation-iteration-count: 1;

-ms-animation-name:revealfromright;
-ms-animation-duration: 1s;
-ms-animation-iteration-count: 1;

animation-name:revealfromright;
animation-duration: 1s;
animation-iteration-count: 1;

visibility:visible;
opacity:1;
box-shadow: 8px 8px 15px gray;/* esto es la sombra */
z-index:2;
/* aquí estilos para el borde de la segunda imagen */
}

.pulloutimage:hover img.original{ /* when mouse rolls over pulloutimage container, style to apply to "original" image */
opacity:0.5;
}

</style>


- En los estilos está marcado el lugar que podemos modificar si deseamos añadir algún tipo de borde a las imágenes.

- La sombra que muestra la segunda imagen la podemos quitar eliminando la línea con la propiedad box-shadow.
Salvador Sánchez Pinto

Excelente Gema gracias justo lo que estaba buscando un abrazooo a la distancia !!!

Responder
Gem@

:: Pero que rapidezzzzz si no me ha dado tiempo ni a repasar la entrada jajajaja

Responder
Unknown

Encantador, te pasamos a buscar con Minimimo, a prepararse Julia :P

Responder
Johnny Uve

Un efecto muy logrado, Gem@, y solamente con CSS3, sin librerias javascript externas y sin relentizaciones.

Responder
Gem@

:: Ya estoy preparada Graciela ! :D

:: Y resulta muy vistoso verdad Johnny? :)

Responder
Cocina

Que buen efecto!me encanto:D

Responder
José L. Bravo

Muy atractivo y simple ;)

Saludos

Responder
Gem@

:: Me alegra que te guste Cocofansclub :)

:: Saludos Pepée Pilato :)

Responder
Unknown

Kaixo Gem@, me crea conflictos con la paginacion del blog, lastima no poder usarlo

Responder
Anónimo

Debe ser muy interesante este mundo. Lástima que haya llegado a este país a los 60 años.
Soy cubana y acabo de escribir una novela. Saldrá en Marzo y se llama La realidad de un Sueño.
Entré a tu blog cuando leí la entrevista de NicoNico.
Estoy intentando hacer un blog propio , pero me es muy difícil.
Hace años llevo recopilando un material relacionado con las artes y las ciencias en general. También tengo hechos históricos increíbles. Pensaba hacer un libro digital para combinarlo con el link de cada artículo, pero luego se me ocurrió que podía hacer un blog.
Lo cierto es que no doy con este mundo lleno de jeroglíficos para mí. Es una lástima.
Felicidades para ti y cada vez que pueda te seguiré.
Un beso,
Gelois.

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top